<template>
  <div class="Box">
    <div v-if="flag" class="main">
      <!-- 新增区域 -->
      <div>
        <el-row
          :gutter="20"
          type="flex"
          justify="end"
          style="padding-right: 10px"
        >
          <el-button
            type="primary"
            size="mini"
            plain
            @click="addOrEdit()"
          >新增试题</el-button>
        </el-row>
      </div>
      <!-- 搜索区域 -->
      <div>
        <el-form
          ref="form"
          :model="paramsData"
          label-position="right"
          label-width="100px"
          class="form"
        >
          <el-row :gutter="10">
            <el-col :span="6">
              <el-form-item label="学科名称">
                <el-select
                  v-model="paramsData.subject_id"
                  placeholder="请选择学科"
                  size="mini"
                  clearable
                  @change="change"
                >
                  <el-option
                    v-for="item in subjectList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="目录名称">
                <el-select
                  v-model="paramsData.directory_id"
                  placeholder="请选择学科"
                  size="mini"
                  clearable
                >
                  <el-option
                    v-for="item in subjectList[
                      subjectList.findIndex((item) => {
                        return item.id === paramsData.subject_id
                      })
                    ]?.children"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="标签名称">
                <el-select
                  v-model="paramsData.tag_id"
                  placeholder="请选择标签"
                  size="mini"
                  clearable
                >
                  <el-option
                    v-for="item in subjectList[
                      subjectList.findIndex((item) => {
                        return item.id === paramsData.subject_id
                      })
                    ]?.children[
                      subjectList[
                        subjectList.findIndex((item) => {
                          return item.id === paramsData.subject_id
                        })
                      ]?.children.findIndex((item) => {
                        return item.id === paramsData.directory_id
                      })
                    ]?.children"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="试题类型">
                <el-select
                  v-model="paramsData.quest_type"
                  clearable
                  placeholder="选择题型"
                  size="mini"
                >
                  <el-option label="单选题" :value="1" />
                  <el-option label="多选题" :value="2" />
                  <el-option label="判断题" :value="3" />
                  <el-option label="简答题" :value="4" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="6">
              <el-form-item label="审核状态">
                <el-select
                  v-model="paramsData.check_state"
                  placeholder="请选择审核状态"
                  size="mini"
                  clearable
                >
                  <el-option label="待审核" :value="1" />
                  <el-option label="审核通过" :value="2" />
                  <el-option label="不通过" :value="3" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="发布状态">
                <el-select
                  v-model="paramsData.show_state"
                  placeholder="请选择发布状态"
                  size="mini"
                  clearable
                >
                  <el-option label="上架" :value="1" />
                  <el-option label="下架" :value="2" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="创建者">
                <el-input
                  v-model="paramsData.create_name"
                  size="mini"
                  placeholder="请选择创建者"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="试题难度">
                <el-select
                  v-model="paramsData.difficulty"
                  placeholder="请选择难度"
                  size="mini"
                  clearable
                >
                  <el-option label="简单" :value="1" />
                  <el-option label="中等" :value="2" />
                  <el-option label="较难" :value="3" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="6">
              <el-form-item label="是否真题">
                <el-select
                  v-model="paramsData.is_true_question"
                  placeholder="请选择是否真题"
                  size="mini"
                  clearable
                >
                  <el-option label="是" :value="1" />
                  <el-option label="否" :value="2" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="创建时间">
                <el-date-picker
                  v-model="timeData"
                  size="mini"
                  type="daterange"
                  value-format="timestamp"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="changeTIme"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-row
                :gutter="20"
                type="flex"
                justify="end"
                style="padding-top: 5px; padding-right: 20px"
              >
                <el-button
                  type="primary"
                  size="mini"
                  @click="handleSearch"
                >查询</el-button>
                <el-button size="mini" @click="resetForm">重置</el-button>
                <el-button
                  type="warning"
                  icon="el-icon-folder-add"
                  size="mini"
                  plain
                  @click="isShow3 = !isShow3"
                />
              </el-row>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 工具区域 -->
      <div v-if="isShow" class="toll">
        <el-row :gutter="20" style="padding-left: 20px">
          <el-button
            type="success"
            size="mini"
            @click="changeAll(1)"
          >批量上架</el-button>
          <el-button
            type="warning"
            size="mini"
            @click="changeAll(2)"
          >批量下架</el-button>
          <el-button
            type="primary"
            size="mini"
            @click="changeAll(3)"
          >批量通过</el-button>
        </el-row>
      </div>
      <!-- 表格区域 -->
      <div class="table">
        <el-table
          ref="multipleTable"
          :data="questionList"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="address" label="试题信息">
            <template #default="{ row }">
              <div v-if="isShow3">
                <el-row :gutter="20" type="flex">
                  <el-col :span="6" style="line-height: 48px">
                    ID: <span>{{ row.id }}</span>
                  </el-col>
                  <el-col :span="18">
                    题干信息:
                    <el-link type="primary" @click="detailQuestion(row.id)">
                      <p v-html="row.question" />
                    </el-link>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="9">
                    <div>
                      试题编号:<span>{{ row.quest_num }}</span>
                    </div>
                    <div>
                      标签信息:<span>{{ row.tag_info[0] }}</span>
                    </div>
                    <div>
                      <div>
                        审核意见:
                        <span v-if="!row.check_remarks">暂无</span>
                        <span v-else>{{ row.check_remarks }}</span>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="4">
                    <div>
                      <div>
                        试题类型:
                        <span v-if="row.quest_type === 1">单选题</span>
                        <span v-else-if="row.quest_type === 2">多选题</span>
                        <span v-else-if="row.quest_type === 3">判断题</span>
                        <span v-else>简答题</span>
                      </div>
                    </div>
                    <div>
                      <div>
                        发布状态:
                        <el-tag
                          v-if="row.show_state === 1"
                          size="mini"
                          type="success"
                        >上架</el-tag>
                        <el-tag
                          v-else
                          type="warning"
                          size="mini"
                        >下架</el-tag>
                      </div>
                    </div>
                    <div>
                      创建人:<span>{{ row.create_name }}</span>
                    </div>
                  </el-col>
                  <el-col :span="5">
                    <div>
                      归属学科:<span>{{ row.subject_name }}</span>
                    </div>
                    <div>审核人:<span>暂无</span></div>
                    <div>
                      <div>
                        难度:
                        <span v-if="row.difficulty === 1">简单</span>
                        <span v-else-if="row.difficulty === 2">中等</span>
                        <span v-else>较难</span>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div>
                      归属目录:<span>{{ row.directory_name }}</span>
                    </div>
                    <div>
                      <div>
                        审核状态:
                        <el-tag
                          v-if="row.check_state === 1"
                          type="warning"
                          size="mini"
                        >待审核</el-tag>
                        <el-tag
                          v-else-if="row.check_state === 2"
                          type="success"
                          size="mini"
                        >通过</el-tag>
                        <el-tag
                          v-else
                          type="danger"
                          size="mini"
                        >不通过</el-tag>
                      </div>
                    </div>
                    <div>
                      发布时间:<span>{{ row.check_time }}</span>
                    </div>
                  </el-col>
                </el-row>
              </div>
              <div v-else>
                <el-row :gutter="10" type="flex">
                  <el-col :span="6" style="line-height: 48px">
                    ID: <span>{{ row.id }}</span>
                  </el-col>
                  <el-col :span="18">
                    题干信息:
                    <el-link type="primary" @click="detailQuestion(row.id)">
                      <p v-html="row.question" />
                    </el-link>
                  </el-col>
                </el-row>
                <el-row :gutter="20" type="flex">
                  <el-col :span="5">
                    <div>
                      归属学科:<span>{{ row.subject_name }}</span>
                    </div>
                  </el-col>
                  <el-col :span="4">
                    <div>
                      归属目录:<span>{{ row.directory_name }}</span>
                    </div>
                  </el-col>
                  <el-col :span="5">
                    <div>
                      标签信息:<span>{{ row.tag_info[0] }}</span>
                    </div>
                  </el-col>
                  <el-col :span="4">
                    <div>
                      发布状态:
                      <el-tag
                        v-if="row.show_state === 1"
                        size="mini"
                        type="success"
                      >上架</el-tag>
                      <el-tag
                        v-else
                        type="warning"
                        size="mini"
                      >下架</el-tag>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div>
                      发布时间:<span>{{ row.check_time }}</span>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            width="150"
            label="操作"
            align="center"
          >
            <template #default="{ row }">
              <div v-if="row.show_state === 1">
                <el-button
                  type="text"
                  icon="el-icon-edit"
                  size="mini"
                  @click="show(row)"
                >下架</el-button>
              </div>
              <div v-else>
                <span>
                  <el-button
                    v-if="row.check_state === 1"
                    type="text"
                    icon="el-icon-edit"
                    size="mini"
                    @click="check(row)"
                  >审核</el-button>
                  <el-button
                    v-else-if="row.check_state === 2"
                    v-allow="'exam:question:show'"
                    type="text"
                    icon="el-icon-edit"
                    size="mini"
                    @click="show(row)"
                  >上架</el-button>
                </span>
                <!-- <el-button
                  type="text"
                  icon="el-icon-edit"
                  size="mini"
                  @click="check(row)"
                >审核</el-button> -->
                <el-button
                  type="text"
                  icon="el-icon-edit"
                  size="mini"
                  @click="handleEdit(row.id)"
                >修改</el-button>
                <el-button
                  type="text"
                  icon="el-icon-delete"
                  size="mini"
                  @click="deleteQuestion(row.id)"
                >删除</el-button>
              </div>
            </template>
          </el-table-column>

        </el-table>
      </div>
      <!-- 分页器 -->
      <div class="page">
        <el-row :gutter="20" type="flex" justify="end">
          <el-pagination
            :current-page="paramsData.page"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="paramsData.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </div>
    </div>
    <AddOrEdit
      v-else
      :id="id"
      :question-list="questionList"
      @changeAdd="flag = $event"
    />
    <!-- 审核弹框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      @close="handleClose"
    >
      <el-form
        ref="form"
        :model="form"
        :inline="true"
        label-position="right"
        label-width="100px"
        class="form"
      >
        <el-form-item label="审核结果">
          <el-select
            v-model="form.check_state"
            placeholder="请选择审核状态"
            size="mini"
            clearable
          >
            <el-option label="待审核" :value="1" />
            <el-option label="审核通过" :value="2" />
            <el-option label="不通过" :value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="审核意见">
          <el-input
            v-model="form.check_remarks"
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">确认</el-button>
          <el-button @click="handleClose">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 详情弹框 -->
    <el-dialog
      class="dialog"
      :visible="isShow2"
      title="试题预览"
      width="65%"
      @close="isShow2 = false"
    >
      <el-row :gutter="20" type="flex" justify="center">
        <el-col :span="4">
          <span>基本信息</span>
        </el-col>
      </el-row>
      <el-table
        ref="multipleTable"
        :data="detailData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column prop="address" label="">
          <template #default="{ row }">
            <el-row :gutter="20">
              <el-col :span="9">
                <div>
                  试题编号:<span>{{ row.quest_num }}</span>
                </div>
                <div>
                  标签信息:<span>{{ row.tag_info[0] }}</span>
                </div>
                <div>
                  <div>
                    审核意见:
                    <span v-if="!row.check_remarks">暂无</span>
                    <span v-else>{{ row.check_remarks }}</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="4">
                <div>
                  <div>
                    试题类型:
                    <span v-if="row.quest_type === 1">单选题</span>
                    <span v-else-if="row.quest_type === 2">多选题</span>
                    <span v-else-if="row.quest_type === 3">判断题</span>
                    <span v-else>简答题</span>
                  </div>
                </div>
                <div>
                  <div>
                    发布状态:
                    <el-tag
                      v-if="row.show_state === 1"
                      size="mini"
                      type="success"
                    >上架</el-tag>
                    <el-tag v-else type="warning" size="mini">下架</el-tag>
                  </div>
                </div>
                <div>
                  创建人:<span>{{ row.create_name }}</span>
                </div>
              </el-col>
              <el-col :span="5">
                <div>
                  归属学科:<span>{{ row.subject_name }}</span>
                </div>
                <div>审核人:<span>暂无</span></div>
                <div>
                  <div>
                    难度:
                    <span v-if="row.difficulty === 1">简单</span>
                    <span v-else-if="row.difficulty === 2">中等</span>
                    <span v-else>较难</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div>
                  归属目录:<span>{{ row.directory_name }}</span>
                </div>
                <div>
                  <div>
                    审核状态:
                    <el-tag
                      v-if="row.check_state === 1"
                      type="warning"
                      size="mini"
                    >待审核</el-tag>
                    <el-tag
                      v-else-if="row.check_state === 2"
                      type="success"
                      size="mini"
                    >通过</el-tag>
                    <el-tag v-else type="danger" size="mini">不通过</el-tag>
                  </div>
                </div>
                <div>
                  发布时间:<span>{{ row.check_time }}</span>
                </div>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <el-row :gutter="20" type="flex" justify="center">
        <el-col :span="4">
          <span>试题信息</span>
        </el-col>
      </el-row>
      <el-table
        ref="multipleTable"
        :data="detailData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column prop="address" label="">
          <template #default="{ row }">
            <el-row :gutter="20" type="flex">
              <el-col :span="18">
                题干信息:
                <el-link type="primary" @click="detailQuestion(row.id)">
                  <p v-html="row.question" />
                </el-link>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="24">
                <div>
                  选项信息:
                  <span v-if="row.quest_type === 3">
                    <el-checkbox
                      v-for="(item, index) in JSON.parse(row.quest_options)"
                      :key="index"
                      :value="item.is_true"
                    >{{ item.code }}</el-checkbox>
                  </span>
                  <span v-else-if="row.quest_type === 1">
                    <el-checkbox
                      v-for="(item, index) in JSON.parse(row.quest_options)"
                      :key="index"
                      :value="item.is_true"
                    >{{ item.code }}</el-checkbox>
                  </span>
                  <span v-else-if="row.quest_type === 2">
                    <el-checkbox
                      v-for="(item, index) in JSON.parse(row.quest_options)"
                      :key="index"
                      :value="item.is_true"
                    >{{ item.code }} {{ item.content }}</el-checkbox>
                  </span>
                  <span v-else>简答题无选项</span>
                </div>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <el-row :gutter="20" type="flex" justify="center">
        <el-col :span="4">
          <span>答案信息</span>
        </el-col>
      </el-row>
      <el-table
        ref="multipleTable"
        :data="detailData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column prop="address" label="">
          <template #default="{ row }">
            <el-row :gutter="20">
              <el-col :span="24">
                真确答案：<span v-html="row.quest_answer" />
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="24">
                答案解析：<span v-html="row.quest_remark" />
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import {
  getExamQuestion,
  getSubjectTree,
  updateShow,
  updateCheck,
  delQuestion
} from '@/api/question'
import AddOrEdit from './components/addorEdit.vue'
export default {
  components: {
    AddOrEdit
  },
  data() {
    return {
      isShow3: true,
      modal: [],
      detailData: [],
      isShow2: false,
      id: null,
      checkStates: [],
      ids: [],
      form: {
        check_remarks: '',
        check_state: null,
        id: null
      },
      isShow: false,
      dialogVisible: false,
      flag: true,
      paramsData: {
        page: 1,
        limit: 10,
        subject_id: null,
        directory_id: null,
        tag_id: null,
        difficulty: null,
        quest_type: null,
        is_true_question: null,
        show_state: null,
        check_state: null,
        create_name: null,
        create_time: null
      },
      subjectList: [],
      questionList: [],
      total: null,
      timeData: []
    }
  },
  created() {
    this.initQuestion()
  },
  methods: {
    detailQuestion(id) {
      this.isShow2 = true
      this.detailData = this.questionList.filter((item) => item.id === id)
    },
    handleEdit(id) {
      this.id = id
      this.flag = false
    },
    async changeAll(id) {
      if (id === 1) {
        await updateShow({ id: this.ids, show_state: 1 })
        this.$message.success('批量上架成功')
      } else if (id === 2) {
        await updateShow({ id: this.ids, show_state: 2 })
        this.$message.success('批量下架成功')
      } else {
        if (this.checkStates.length <= 0) {
          return this.$message.error('所有数据都已审核通过')
        }
        await updateCheck({ checklist: this.checkStates })
        this.$message.success('批量审核通过成功')
      }
      this.ids = []
      this.initQuestion()
    },
    change() {
      this.paramsData.directory_id = null
      this.paramsData.tag_id = null
    },
    async deleteQuestion(id) {
      const res = await await delQuestion(id)
      console.log(res)
      if (res.success) {
        if (this.questionList.length <= 1 && this.paramsData.page !== 1) {
          this.paramsData.page -= 1
        }
        this.initQuestion()
      } else {
        this.$message.error(res.msg)
      }
    },
    async submit() {
      await updateCheck({ checklist: [this.form] })
      this.initQuestion()
      this.handleClose()
    },
    handleClose() {
      this.form = {
        id: null,
        check_state: null,
        check_remarks: ''
      }
      this.dialogVisible = false
    },
    async check(row) {
      this.dialogVisible = true
      this.form.check_state = row.check_state
      this.form.id = row.id
    },
    async show(row) {
      console.log(row)
      if (row.show_state === 1) {
        await updateShow({ id: [row.id], show_state: 2 })
      } else {
        await updateShow({ id: [row.id], show_state: 1 })
      }
      this.initQuestion()
    },
    addOrEdit(id) {
      if (id) {
        console.log(1)
      } else {
        this.flag = false
      }
    },
    resetForm() {
      this.paramsData = {
        page: 1,
        limit: 10,
        subject_id: null,
        directory_id: null,
        tag_id: null,
        difficulty: null,
        quest_type: null,
        is_true_question: null,
        show_state: null,
        check_state: null,
        create_name: null,
        create_time: null
      }
      this.initQuestion()
    },
    handleSearch() {
      this.paramsData.page = 1
      this.initQuestion()
    },
    handleSelectionChange(val) {
      if (val.length === 0) {
        console.log(1)
        this.isShow = false
      } else {
        this.isShow = true
      }
      console.log(val)
      const arr = val.filter((item) => item.check_state !== 2)
      console.log(arr)
      arr.forEach((item) => {
        this.checkStates.push({
          check_remarks: item.check_remarks,
          check_state: 2,
          id: item.id
        })
      })
      val.forEach((item) => {
        this.ids.push(item.id)
      })
      // console.log(arr)
    },
    changeTIme(val) {
      console.log(val)
      if (val?.length > 0) {
        this.paramsData.create_time = val.join(',')
      } else {
        this.paramsData.create_time = null
      }
    },
    handleSizeChange(val) {
      console.log(val)
      this.paramsData.limit = val
      this.initQuestion()
    },
    handleCurrentChange(val) {
      console.log(val)
      this.paramsData.page = val
      this.initQuestion()
    },
    async initQuestion() {
      const res = await getExamQuestion(this.paramsData)
      const res1 = await getSubjectTree()
      // console.log(res)
      this.questionList = res.data.list
      // console.log(res1)
      this.subjectList = res1.data
      this.total = res.data.total
      // console.log(this.questionList[0].tag_id)
    }
  }
}
</script>

<style lang="scss" scoped>
.Box {
  // margin: 20px
  background-color: #ffffff;
  padding: 10px;
  .el-form-item {
    margin-bottom: 0px;
  }
}
</style>>

